<!DOCTYPE html>
<html>
	<head>
	    <meta charset="utf-8">
	    <meta name="viewport" content="maximum-scale=1.0, minimum-scale=1.0, user-scalable=0, initial-scale=1.0, width=device-width" />
	    <meta name="format-detection" content="telephone=no, email=no, date=no, address=no">
	    <title>Hello APP</title>
	    <link rel="stylesheet" type="text/css" href="../../css/index.css" />
	</head>
	<style type="text/css">
		.warp{width: 100%;}
		input::-webkit-input-placeholder{color: #BBBBBB;font-size: 14px;}
		input::-moz-placeholder{color: #BBBBBB;font-size: 14px;}

		.tishi{width: 100%;height: 50px;background:#F6F6F6;color: #FF9502;line-height: 50px;padding: 0 15px 0 40px;box-sizing: border-box;font-size: 13px;
		background: url(../../image/main3/gth.png) no-repeat left 15px center;background-size:19px;}
		.info-box{width: 100%;background: #FFFFFF;padding: 0 15px;box-sizing: border-box;}
		.info-box .info-one{align-items: center;height: 50px;}
		.info-box .info-one input{text-align: right;padding: 10px 0;line-height: 30px;box-sizing: border-box;}

		.up-img{width: 100%;background: #FFFFFF;margin-bottom: 10px;box-sizing: border-box;padding: 0 15px 25px 15px;}
		.up-img .title{line-height: 50px;font-size: 14px;}
		.up-img .img-box{width: 100%;flex-wrap: wrap;}
		.up-img .img-box .img-one{width: 22%;padding-bottom: 22%;background-color:#F5F6F6;margin-right: 4%;position: relative;top: 0;left: 0;}
		.up-img .img-box .img-one:nth-child(4n){margin-right: 0;}
		.up-img .img-box .img-one .del{width: 20px;height: 20px;position: absolute;top: 4px;right: 4px;background: url(../../image/main3/del-img.png) no-repeat center;background-size:cover ;}
		.up-img .img-box .add-img{background: url(../../image/main3/add_img.png) no-repeat center ;background-size:100%;width: 80px;height: 80px;}

		.shouhuo-btn{height: 45px;background:#FF9502;height: 45px;border-radius:4px;
		text-align: center;line-height: 45px;font-size: 18px;color: #FFFFFF;margin: 30px;}

	</style>
	<body>
		<div id="vue" class="warp">
			<div class="tishi">保税仓不支持到付快递，若为到付快递则后果自行承担</div>
	        <div class="info-box border-bottom">
	        	<div class="info-one flex">
	        		<div class="text">物流公司</div>
	        		<input class="flex1" type="text" maxlength="10" id="wuliuName" placeholder="请填写物流公司" />
	        	</div>
	        	<div class="info-one flex">
	        		<div class="text">物流单号</div>
	        		<input class="flex1" type="text" maxlength="30" id="wuliuOrder" placeholder="请填写物流单号" />
	        	</div>
	        	<div class="info-one flex">
	        		<div class="text">寄件人手机</div>
	        		<input class="flex1" type="tel" maxlength="11" id="phone" placeholder="请填写手机号" />
	        	</div>
	        </div>
	        <div class="up-img">
        		<div class="title">上传图片<i style="color:#999;">(最多4张)</i></div>
        		<div class="img-box flex">
        			<div class="add-img" id="addImg" tapmode onclick="fnUploadPic(this)"></div>
        		</div>
        	</div>

			<div class="warp-btn" id="app-footer" tapmode onclick="upWuLiuData()">
	            <div class="btn">提交</div>
	        </div>
		</div>
	</body>
</html>
<script type="text/javascript" src="../../script/base.min.js" id="loadjs" data-js="L/swiper.min,L/lazyload,L/h-tool"></script>
<script type="text/javascript">
	define(function (require, exports, module) {
		lanYun.setFooter('app-footer');
		var sdata = {};
		var oosinfo = lanYun.getStorage('imageData') || null;
		var ajax = 0;
		pageParam = api.pageParam;
		sdata.id = pageParam.id;
		//console.log(pageParam.phone);
		lanYun.newVue('#vue',function() {

		});

		if(pageParam && pageParam.phone){
			$('#phone').val(pageParam.phone);
		}
		// 上传图片
		fnUploadPic = function(tis) {
			//lanYun.getPermission(['camera','photos']);
			var dst = tis.dataset;
			if(ajax == 1){return;}
			ajax = 1;
			api.actionSheet({buttons: ['拍照', '相册选取'],style: {fontNormalColor: '#333',fontPressColor: '#333'}}, function(ret, err) {
				ajax = 0;
				if (ret.buttonIndex == 3)return false;
				var souType = 'album'; //相机
				if (ret.buttonIndex == 1)souType = 'camera';
				api.getPicture({sourceType: souType,mediaValue: 'pic',destinationType: 'url',quality: 80,allowEdit: true,}, function(ret, err) {
					if (ret && ret.data) {
						fnUploadOos(ret.data);
					}
				});
			});
		};

		//上传到对象存储服务器
		function fnUploadOos(path){
			if(!path){
				lanYun.toast('请选择上传文件!');
				return;
			}
			if(!oosinfo){
				lanYun.toast('网路访问超时请重试');
				return;
			}
			upfile(path);
		};

		// 上传图片
		function upfile(path){
			var ext = lanYun.getFileExt(path);
			var file = oosinfo.key+lanYun.randStr(10)+ext;
			var urlFile = oosinfo.url+'/'+file;
			lanYun.showProgress({type:2});
			api.ajax({url: oosinfo.url,method: 'post',data: {values:{key: file,OSSAccessKeyId: oosinfo.OSSAccessKeyId,success_action_status: oosinfo.success_action_status,policy:oosinfo.policy,signature: oosinfo.signature},files: {file:path}}}, function(ret, err) {
				lanYun.hideProgress();
				if(err && err.statusCode == 200){
					$('#addImg').before('<div class="img-one bgpic " data-img="'+ urlFile +'" style="background-image:url('+ path +');"><div class="del" tapmode onclick="delImages(this)"></div></div>');
					if($('.img-one').length >= 4){
						$('#addImg').hide();
					}
					lanYun.toast('上传成功');
				}else{
					lanYun.toast('上传失败!');
				}
			});
		};

		// 删除图片
		delImages = function(tis){
			var dst = tis.dataset;
			$(tis).parent().remove();
			if($('.img-one').length <= 3){
				$('#addImg').show();
			}
		};

		// 提交售后信息
		upWuLiuData = function (){
			sdata.kd_name = $('#wuliuName').val();
			sdata.kd_code = $('#wuliuOrder').val();
			sdata.kd_phone = $('#phone').val();
			if(!sdata.kd_name){
				lanYun.toast("请填写物流公司");
				return;
			}
			if(!sdata.kd_code){
				lanYun.toast("请填写物流单号");
				return;
			}
			if(!sdata.kd_phone){
				lanYun.toast("请填写手机号");
				return;
			}
			var images = [];
			$('.img-box .img-one').each(function(a,f) {
				images.push($(this).data('img'));
			});
			sdata.images = images;
			if(sdata.images.length <= 0){
				lanYun.toast("请上传发货凭证");
				return;
			}
			//console.log(JSON.stringify(sdata));
			lanYun.post('UserOrderTui/fahuo',sdata,function (ret) {
				lanYun.toast(ret.msg);
				//console.log(JSON.stringify(ret));
				if(ret.errcode == 0 ){
					lanYun.setStorage('reshpage',1);
					lanYun.event('updatecart');
					lanYun.event('upuser');
					api.closeWin();
				}
			},2)
		}

	});
</script>
